<template>
  <view class="business-info">
    <!-- <view class="top_background" v-if="info.picBackground">
                                                                                                  <image src="../../static/logo.png" mode="aspectFill"></image>
                                                                                                </view> -->
    <view class="store-main flexRow aCenter jBetween">
      <view class="store-avatar">
        <image :src="info.avatar" mode="aspectFill"></image>
      </view>
      <view class="store-info flexRow aCenter jAround">
        <view>
          <view class="store-info-num">{{ info.prodCount }}</view>
          <view class="store-info-title">{{ t("other.product") }}</view>
        </view>
        <view>
          <view class="store-info-num">{{ info.videoCount }}</view>
          <view class="store-info-title">{{ t("other.video") }}</view>
        </view>
        <view>
          <view class="store-info-num">{{ info.followCount }}</view>
          <view class="store-info-title">{{ t("my.follow") }}</view>
        </view>
      </view>
    </view>
    <view class="store-main">
      <!-- 商家名称 /商家介绍 -->
      <view class="store-name">{{ info.name }}</view>
      <view
        class="store-content-info"
        :style="moreShow ? '-webkit-line-clamp:2' : ''"
      >
        <!--          Introduction：{{ info.intro }}-->
      </view>

      <TextHidden v-if="info.intro" :text="info.intro"></TextHidden>
      <!--      <view class="more-content" @click="moreContent"-->
      <!--        >{{ moreShow ? 'See more' : 'recover' }}-->
      <!--      </view>-->
      <!-- 商家地址 -->
      <view class="store-address flexRow aCenter">
        <fui-icon name="location" :size="50"></fui-icon>
        <view class="store-address-info">{{ info.address }}</view>
      </view>
      <!-- 商家聊天 关注 -->
      <view class="store-follow flexRow aCenter">
        <view class="store-chat" @click="jumpChat(info.syhId)">
          <!--          <fui-icon name="comment" :size="20"></fui-icon>-->
          <image mode="widthFix" src="@/static/image/chat.png"></image>
        </view>
        <view class="store-btn">
          <fui-button
            v-if="info.followFlag"
            class="text-button"
            borderColor="$subject-color"
            height="70rpx"
            size="28"
            background="#ffffff"
            @click="change_follow(info.id, info.followFlag)"
            >{{ t("my.unFollow") }}
          </fui-button>

          <fui-button
            v-else
            height="70rpx"
            size="28"
            @click="change_follow(info.id, info.followFlag)"
            >{{ t("my.followStore") }}
          </fui-button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { jumpChat } from "@/utils/loginTIm";

import { follow_store } from "../../api/follow";
import { useI18n } from "vue-i18n";

const { t } = useI18n();

const props = defineProps({
  storeInfo: {
    type: Object,
    default: () => ({}),
  },
});
// watch(
//   () => props.storeInfo,
//   (newVal) => {
//     console.log("新商品数据", newVal);
//
//     info.value = newVal;
//   }
// );
// 数据

const info = computed(() => {
  return props.storeInfo;
});

interface infoType {
  avatar: string;
  prodCount: string;
  videoCount: string;
  followCount: string;
  name: string;
  intro: string;
  address: string;
  followFlag: string;
}

// 是否展开简介
const moreShow = ref(true);

// 展开关闭简介
const moreContent = () => {
  moreShow.value = !moreShow.value;
  console.log(moreShow.value);
};
// 关注 取关店铺
const change_follow = async (id: string, followFlag: boolean) => {
  const res = await follow_store(id);
  if (res.code == 0) {
    if (followFlag) {
      // 取关
      uni.$u.toast("Cancel successful");
    } else {
      // 关注
      uni.$u.toast("Follow Success");
    }
    info.value.followFlag = !followFlag;
  }
};
</script>
<style scoped lang="scss">
.top_background {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;

  image {
    width: 750rpx;
  }
}

.store-main {
  width: 90%;
  margin: 25rpx auto;
  position: relative;
  z-index: 1;
  align-items: flex-end;
  .store-avatar {
    flex: 0.6;

    image {
      width: 130rpx;
      height: 130rpx;
      border-radius: 50%;
    }
  }

  .store-info {
    text-align: center;
    line-height: 2;
    flex: 2;
    align-items: flex-end;

    .store-info-num {
      font-size: 17px;
      font-weight: bold;
      text-align: center;
      letter-spacing: 0px;
    }

    .store-info-title {
      color: #999;

      font-size: 14px;
      line-height: 14px;
    }
  }

  .store-name {
    width: 90%;
    margin: 25rpx 0;

    font-size: 15px;
    font-weight: bold;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .store-content-info {
    font-size: 13px;
    line-height: 2;
    text-align: justify; /* 浏览器可能不支持 */
    color: #666;
    width: 100%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
  }

  .more-content {
    color: $vice-subject-color;
    font-size: 26rpx;
    display: inline;
    border-bottom: 1px $vice-subject-color solid;
  }

  .store-address {
    width: 100%;
    margin: 25rpx auto;

    font-size: 13px;
    line-height: 1.8;
    color: #303030;

    .store-address-info {
      margin-left: 20rpx;
      display: -webkit-box;
      overflow: hidden;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      text-overflow: ellipsis;
    }
  }

  .store-follow {
    .store-chat {
      width: 68rpx;
      height: 68rpx;
      padding: 10rpx;
      border-radius: 15rpx;
      background-color: #f0f0f0;
      display: flex;
      justify-content: center;
      align-items: center;

      image {
        width: 30rpx;
      }
    }

    .store-btn {
      margin-left: 40rpx;
      flex: 2;
    }
  }
}

.business-info {
  margin-top: -40px;
}
</style>
